<template>
  <div>
    <van-cell-group class="vcg" inset v-for="(share,index) in shareArray">
      <van-panel :title="share.title">
        <router-link :to="{
          path: '/homeview/share/sharepage/sharedetails',
          query:{
            userId: share.userId,
            articleId: share.articleId,
            moduleId: share.moduleId,
            url: images[(share.moduleId)%1000-1].url[(index+1)%(images[(share.moduleId)%1000].url.length)-1]
          }
        }">
          <van-icon name="arrow" style="float: right" @click="detail"/>
        </router-link>
        <div style="padding-left: 16px">
          <p style="margin: 6px auto">
            <van-image
              round
              width="1.5rem"
              height="1.5rem"
              :src="share.avatar"
            />
            <span style="font-size: 20px; vertical-align: top;margin-left: 6px">{{
                share.nickName
            }}</span>
          </p>
        </div>

        <div style="padding-left: 16px" class="van-multi-ellipsis--l2">
          {{ share.content }}
        </div>
        <div
          style="display: flex; height: 200px; width: 200px; padding-left: 16px"
        >
<!--          <div v-for="index in 100">-->
            <img :src="images[(share.moduleId)%1000-1].url[(index+1)%(images[(share.moduleId)%1000].url.length)-1]">
<!--          </div>-->
        </div>

        <template #footer>
          <van-icon name="like-o" color="red" v-if="isClick" />
          <van-icon name="like-o" v-else />
          <span class="span">{{ share.articleLike }}</span>
          <van-icon name="star-o" color="#ffcc00" v-if="isClick" />
          <van-icon name="star-o" v-else />
          <span class="span">{{ share.articleCollection }}</span>
<!--          <van-icon name="chat-o" />
          <span class="span">{{ share.articleComment }}</span>-->
          <van-icon name="share-o" @click="showShare = true" />
          <span class="span">{{ share.forward }}</span>
        </template>
      </van-panel>
    </van-cell-group>

    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />

<!--    <van-pagination
      class="vp"
      v-model="currentPage"
      :total-items="50"
      :show-page-size="5"
    >
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
      <template #page="{ text }">{{ text }}</template>
    </van-pagination>-->
  </div>
</template>

<script>
import {toQQ,toWeibo,toWechat,toQQzone} from "@/common/share";
import { Toast } from "vant";
import {mapState} from "vuex"

export default {
  name: "Share",
  data() {
    return {
      sharePage: [
      ],
      currentPage: 1,
      isClick: true,
      showShare: false,
      options: [
        [
          { name: "QQ", icon: "qq" },
          { name: "微信", icon: "wechat" },
          { name: "QQ空间", icon: "qq" },
          { name: "微博", icon: "weibo" },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
      images: [
        {
          id: 1001, url: [
            "https://s1.328888.xyz/2022/09/06/5hm3U.jpg",
            "https://s1.328888.xyz/2022/09/06/5hNid.jpg",
            "https://s1.328888.xyz/2022/09/06/5hDPB.jpg",
            "https://s1.328888.xyz/2022/09/06/5hFXR.jpg",
            "https://s1.328888.xyz/2022/09/06/5hjuP.jpg",
            "https://s1.328888.xyz/2022/09/06/5huo6.jpg",
            "https://s1.328888.xyz/2022/09/06/5h0SX.jpg",
            "https://s1.328888.xyz/2022/09/24/V0XF7.png",
          ]
        },
        {
          id: 1002, url: [
            "https://s1.328888.xyz/2022/09/24/V0n7E.png",
            "https://s1.328888.xyz/2022/09/06/5h6lI.jpg",
            "https://s1.328888.xyz/2022/09/06/5hTkj.jpg",
            "https://s1.328888.xyz/2022/09/06/5h3WK.jpg",
            "https://s1.328888.xyz/2022/09/06/5hhJr.jpg",
            "https://s1.328888.xyz/2022/09/06/5hbBm.jpg",
            "https://s1.328888.xyz/2022/09/06/5hwP7.jpg",
            "https://s1.328888.xyz/2022/09/06/5hGYk.jpg",
            "https://s1.328888.xyz/2022/09/06/5h1ew.jpg",
            "https://s1.328888.xyz/2022/09/06/5ha0E.jpg"]
        },
        {
          id: 1003, url: [
            "https://s1.328888.xyz/2022/09/24/V0Y9k.png",
            "https://s1.328888.xyz/2022/09/06/5hkoJ.jpg",
            "https://s1.328888.xyz/2022/09/06/5h9li.jpg",
            "https://s1.328888.xyz/2022/09/06/5hKkg.jpg",
            "https://s1.328888.xyz/2022/09/06/5hcth.jpg",
            "https://s1.328888.xyz/2022/09/06/5hoWn.jpg",
            "https://s1.328888.xyz/2022/09/06/5hIBs.jpg",
            "https://s1.328888.xyz/2022/09/06/5hVf0.jpg",
            "https://s1.328888.xyz/2022/09/06/5hsYp.jpg"
            ]
        },
        {
          id: 1004, url: [
            "https://s1.328888.xyz/2022/09/24/V0XF7.png",
            "https://s1.328888.xyz/2022/09/06/5hP0o.jpg",
            "https://s1.328888.xyz/2022/09/06/5hf2F.jpg",
            "https://s1.328888.xyz/2022/09/06/5hgeS.jpg",
            "https://s1.328888.xyz/2022/09/06/5hUm5.jpg",
            "https://s1.328888.xyz/2022/09/06/5hx1N.jpg",
            "https://s1.328888.xyz/2022/09/06/5hJty.jpg",
            "https://s1.328888.xyz/2022/09/06/5htdC.jpg",
            "https://s1.328888.xyz/2022/09/06/5hzBd.jpg"
          ]
        },
        {
          id: 1005, url: [
            "https://s1.328888.xyz/2022/09/24/V0ppm.png",
            "https://s1.328888.xyz/2022/09/06/5h7fU.jpg",
            "https://s1.328888.xyz/2022/09/06/5hQnB.jpg",
            "https://s1.328888.xyz/2022/09/06/5he0R.jpg",
            "https://s1.328888.xyz/2022/09/06/5hr2P.jpg",
            "https://s1.328888.xyz/2022/09/06/5hHr6.jpg",
            "https://s1.328888.xyz/2022/09/06/5hqmX.jpg",
            "https://s1.328888.xyz/2022/09/06/5hX1I.jpg",
            "https://s1.328888.xyz/2022/09/06/5hYyj.jpg"
          ]
        },
        {
          id: 1006, url: [
            "https://s1.328888.xyz/2022/09/24/V0HVK.png",
            "https://s1.328888.xyz/2022/08/05/uNr20.jpg",
            "https://s1.328888.xyz/2022/09/05/1xBrE.png",
            "https://s1.328888.xyz/2022/09/05/1xwmJ.jpg",
            "https://s1.328888.xyz/2022/09/05/1xG1w.jpg",
            "https://s1.328888.xyz/2022/09/05/1xCti.jpg",
            "https://s1.328888.xyz/2022/09/05/1xc40.png",
            "https://s1.328888.xyz/2022/09/05/1xo2p.png",
            "https://s1.328888.xyz/2022/09/05/1x2ro.png"
          ]
        },
        {
          id: 1007, url: [
            "https://s1.328888.xyz/2022/09/24/V0r6r.png",
            "https://s1.328888.xyz/2022/09/05/1xVDF.png",
            "https://s1.328888.xyz/2022/09/05/1xs1S.png",
            "https://s1.328888.xyz/2022/09/05/1xMy5.png",
            "https://s1.328888.xyz/2022/09/05/1xMy5.png",
            "https://s1.328888.xyz/2022/09/05/1xgby.png",
            "https://s1.328888.xyz/2022/09/05/1xJ4U.png",
            "https://s1.328888.xyz/2022/09/06/5hYyj.jpg",
            "https://s1.328888.xyz/2022/09/06/5hX1I.jpg"
          ]
        },
        {
          id: 1008, url: [
            "https://s1.328888.xyz/2022/09/24/V04r7.jpg",
            "https://s1.328888.xyz/2022/09/24/V0TDk.jpg",
            "https://s1.328888.xyz/2022/09/24/V0h5E.jpg",
            "https://s1.328888.xyz/2022/09/24/V03yJ.jpg",
            "https://s1.328888.xyz/2022/09/24/V0Bvw.jpg",
            "https://s1.328888.xyz/2022/09/24/V0wbi.jpg",
            "https://s1.328888.xyz/2022/09/24/V0Ggg.jpg",
            "https://s1.328888.xyz/2022/09/24/V0CAh.jpg",
            "https://s1.328888.xyz/2022/09/24/V0k4n.jpg",
            "https://s1.328888.xyz/2022/09/24/V01Is.jpg",
          ]
        },
        {
          id: 1009, url: [
            "https://s1.328888.xyz/2022/09/24/V04r7.jpg",
            "https://s1.328888.xyz/2022/09/24/V0TDk.jpg",
            "https://s1.328888.xyz/2022/09/24/V0h5E.jpg",
            "https://s1.328888.xyz/2022/09/24/V03yJ.jpg",
            "https://s1.328888.xyz/2022/09/24/V0Bvw.jpg",
            "https://s1.328888.xyz/2022/09/24/V0wbi.jpg",
            "https://s1.328888.xyz/2022/09/24/V0Ggg.jpg",
            "https://s1.328888.xyz/2022/09/24/V0CAh.jpg",
            "https://s1.328888.xyz/2022/09/24/V0k4n.jpg",
            "https://s1.328888.xyz/2022/09/24/V01Is.jpg",
          ]
        },
      ]
    }
  },
  computed: {
    ...mapState(['shareArray'])
  },
  created() {
    console.log("展示",this.shareArray)
  },
  methods: {
    detail() {},
    onSelect(option) {
      Toast(option.name);
      const platformName = option.name
      switch (platformName) {
        case 'QQ':
          let title="需要分享的标题"
          let _url = 'https://www.baidu.com/';//自定义网站链接地址
          let url =  window.location.href;//获取当前网页地址

          toQQ(_url,title)
          break
        case '微信':
          toWechat(_url,title)
          break
        case '微博':
          toWeibo(_url,title)
          break
        case 'QQ空间':
          toQQzone(_url,title)
          break
      }
      this.showShare = false;
    },
  },
};
</script>

<style scoped>
.vcg {
  margin-bottom: 16px;
}
.span {
  padding-right: 20px;
}
.vp {
  width: 300px;
  float: right;
}
.van-cell {
  font-size: 18px;
}
</style>